<head>
  <link rel="stylesheet" href="Card.css"> <!-- 引入外部CSS文件，用于样式管理 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>面板与开关按钮</title>
  <style>
    /* 容器样式 */
    .container {
      color: #171717; /* 设置文字颜色为深灰色 */
      position: relative; /* 设置容器为相对定位，以便在其上放置绝对定位的元素 */
      font-family: sans-serif; /* 设置字体为无衬线字体 */
      z-index: 1000; /* 设置容器的z-index为1000，确保它位于最前 */

    }

    /* 面板内盒子样式 */
    .container .box {
      display: flex; /* 使用Flexbox布局 */
      flex-direction: row; /* 横向排列子元素 */
      justify-content: space-between; /* 在横向上均匀分配子元素之间的空隙 */
      align-items: center; /* 垂直方向上居中对齐 */
      width: 14rem; /* 固定宽度为14rem */
      height: 4rem; /* 固定高度为4rem */
      padding: 1rem; /* 内边距1rem */
      background-color: rgba(255, 255, 255, 0.074); /* 设置背景色为白色带透明度 */
      border: 1px solid rgba(255, 255, 255, 0.222); /* 设置边框为白色带透明度 */
      -webkit-backdrop-filter: blur(20px); /* 使用模糊背景效果（针对Safari浏览器） */
      backdrop-filter: blur(20px); /* 使用模糊背景效果 */
      border-radius: 0.7rem; /* 设置圆角边框 */
      transition: all ease 0.3s; /* 设置平滑过渡效果，持续时间为0.3秒 */
      position: relative; /* 设置相对定位以便按钮显示在顶部 */
    }

    /* 切换按钮样式 */
    #checkbox {
      display: none;
    }

    .switch {
      position: absolute; /* 使按钮绝对定位 */
      left: 10px; /* 距离面板左边10px */
      top: 50%; /* 垂直居中对齐 */
      transform: translateY(-50%); /* 精确垂直居中 */
      width: 70px;
      height: 70px;
      background-color: rgb(99, 99, 99);
      border-radius: 50%;
      z-index: 2; /* 确保按钮在最顶层 */
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid rgb(126, 126, 126);
      box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
    }

    .switch svg {
      width: 1.2em;
      height: 1.2em; /* 设置svg图标的高度 */
    }

    .switch svg path {
      fill: rgb(48, 48, 48);
    }

    #checkbox:checked + .switch {
      box-shadow: 0px 0px 1px rgb(151, 243, 255) inset,
        0px 0px 2px rgb(151, 243, 255) inset, 0px 0px 10px rgb(151, 243, 255) inset,
        0px 0px 40px rgb(151, 243, 255), 0px 0px 100px rgb(151, 243, 255),
        0px 0px 5px rgb(151, 243, 255);
      border: 2px solid rgb(255, 255, 255);
      background-color: rgb(146, 180, 184);
    }

    #checkbox:checked + .switch svg {
      filter: drop-shadow(0px 0px 5px rgb(151, 243, 255));
    }

    #checkbox:checked + .switch svg path {
      fill: rgb(255, 255, 255);
    }

    /* 将按钮嵌入到面板中的icon区域，并调整位置 */
    .box .icon {
      display: flex; /* 使用flex布局 */
      justify-content: flex-start; /* 确保切换按钮位于左边 */
      align-items: center; /* 垂直居中对齐 */
      width: auto; /* 宽度自适应内容 */
    }

  </style>
</head>
<body>

  <div class="container">
    <div class="box">
      <div class="device name">
        <!-- 可以放置设备名称等内容 -->
      </div>

      <div>
        <div class="icon">
          <!-- 切换按钮放在这里 -->
          <input id="checkbox" type="checkbox" aria-label="Toggle switch" />
          <label class="switch" for="checkbox">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="slider">
              <path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V256c0 17.7 14.3 32 32 32s32-14.3 32-32V32zM143.5 120.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6c-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4c0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z"></path>
            </svg>
          </label>
        </div>

        <div class="val">
          <!-- 这里可以放置其他内容，如设备值等 -->
        </div>
      </div>
    </div>
  </div>

</body>
</html>
